/** * 根据传入的类型名称,创建不同的控件 */
<template>
  <component
    class="d-context"
    :is="componentType"
    :modelValue="props.modelValue"
    @update:modelValue="handleChange"
    size="small"
    active-text="是"
    inactive-text="否"
    :min="type == 'slider' ? 0.0 : undefined"
    :max="type == 'slider' ? 1.0 : undefined"
    :step="type == 'slider' ? 0.01 : undefined"
    controls-position="right"
  >
    <template v-if="Array.isArray(props.options)">
      <el-option v-for="item in props.options" :label="item.label" :key="item.label" :value="item.value" />
    </template>
  </component>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { ElInput, ElSelect, ElInputNumber, ElColorPicker, ElSlider, ElSwitch } from 'element-plus';

const emits = defineEmits(['update:modelValue']);
const handleChange = function (e: any) {
  emits('update:modelValue', e);
};

interface IOption {
  label: string;
  value: string | number | boolean;
  impact?: string[];
}

interface Props {
  type: string;
  options?: IOption[];
  modelValue: number | string | boolean;
}

const props = defineProps<Props>();

const componentType = computed(() => {
  switch (props.type) {
    case 'label':
      return ElInput;
    case 'text':
      return ElInput;
    case 'textarea':
      return ElInput;
    case 'number':
      return ElInputNumber;
    case 'combobox':
      return ElSelect;
    case 'radio':
      return ElSwitch;
    case 'color':
      return ElColorPicker;
    case 'slider':
      return ElSlider;
    default:
      return ElInput;
  }
});
</script>
